<template>
  <div class="app ThenOrderCardBox">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="first"></el-tab-pane>
      <el-tab-pane label="待付款" name="second"></el-tab-pane>
      <el-tab-pane label="待收货" name="third"></el-tab-pane>
      <el-tab-pane label="待安装" name="fourth"></el-tab-pane>
    </el-tabs>
    <div class="TheOrderList">
      <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
      <el-button>搜索</el-button>

      <ul class="titleTab">
        <li>宝贝</li>
        <li>地址</li>
        <li>数量</li>
        <li>实付款</li>
        <li>状态</li>
        <li>操作</li>
      </ul>

      <ul class="OrderDetailList">
        <li v-for="item in 10" :key="item.id">
          <div>
            <img
              src="https://img.alicdn.com/imgextra/i3/1746358929/TB2omwtpVXXXXbAXXXXXXXXXXXX_!!1746358929.jpg_80x80.jpg"
              alt
            />
            <span>电脑耳</span>
          </div>
          <div>西湖路54号</div>
          <div>1</div>
          <div>￥8.99</div>
          <div>交易成功</div>
          <div>申请发票</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      activeName: "first",
      OrderCardS: ""
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  components: {}
};
</script>

<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.ThenOrderCardBox {
  .titleTab {
    background-color: $MainBackHoverColor;
    padding: 5px 5px;
    height: 25px;
    li {
      float: left;
      // margin-right: 2px;
      height: 25px;
      line-height: 25px;
      width: 145px;
    }
    li:nth-of-type(1) {
      width: 380px;
    }
    li:nth-of-type(6) {
      width: 60px;
    }
  }
  .OrderDetailList {
    li {
      border: 1px rgb(228, 228, 228) solid;
      float: left;
      margin-top: 3px;
      margin-bottom: 3px;
      div {
        width: 145px;
        float: left;
      }
      div:nth-of-type(1) {
        width: 380px;
      }
      div:nth-of-type(6) {
        width: 60px;
      }
    }
  }
}
</style>
